<template>
  <div class="logon-container">
    <el-form
      ref="account"
      class="account"
      :model="account"
      :rules="rules"
      label-position="right"
      label-width="auto"
    >
      <el-form-item prop="username" label="用户名：">
        <el-input v-model.trim="account.username"> </el-input>
      </el-form-item>

      <el-form-item prop="password" label="密码：">
        <!--        <el-input type="password" v-model="account.password"> </el-input>-->
        <el-input v-model="account.password"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="accountSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.login.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "Logon",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      rules: {},
      account: {
        username: "zhangjiu001",
        password: "114477",
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    accountSubmit() {
      this.$http({
        method: "post",
        url: "http://localhost:9090/login",
        data: `username=${this.account.username}&password=${this.account.password}`,
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.$store.commit("updateAuth", res.data);
          /*     Thread.sleep(1000)
                this.$router.push("/content");*/
          // setTimeout(() => this.$router.push("/content"), 1000);
          this.$nextTick(() => {
            this.$router.push("/home");
          });
        },
        (error) => {
          // 701 用户名或密码错误
          // 702 是账号被冻结
          // 709 是登录模块未知异常
          if (error && error.response) {
            if (error.response.status === 701) {
              this.$message.error("抱歉："+error.response.data);
            } else if (error.response.status === 702) {
              this.$notify.warning("账号被封，是否递解封申请");
              console.log(error.response.data);
            } else if (error.response.status === 709) {
              this.$message.info("未知登录异常");
            }
          }
        }
      );
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-form {
  width: 310px;
}
.logon-container {
  margin-top: 280px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
